<template>
  <div style="margin-top: 10px">
    <div class="va"></div>
    <van-row gutter="10">
      <van-col span="9" style="min-height: 300px; background-color: #fff">
        <van-cell
          v-for="(item, index) in list"
          :title="item.categoryName"
          :key="index"
          @click="navclick(item, index)"
          :class="{ active: index == isActive }"
        />
      </van-col>
      <van-col span="14" style="min-height: 300px; background-color: #fff; margin-left: 4px">
        <van-grid :column-num="2">
          <template v-for="(item, index) in data">
            <van-grid-item icon="orders-o" :text="item.categoryName" @click="getItem(item)" :key="index" />
          </template>
        </van-grid>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { getData } from '@/api/productClassify.js'

export default {
  data() {
    return {
      activeIds: 1,
      style: null,
      list: [],
      isActive: false,
      active: 0,
      data: [],
      imgUrls: this.$baseApi
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getData({ pageSize: 999 }).then(res => {
        this.list = res.rows
        this.navclick(this.list[0], 0)
      })
    },
    // 获取右侧选中的商品的数据
    getItem(data) {
      this.$router.push({
        name: 'ProductList',
        query: {
          cid: data.id
        }
      })
    },
    navclick(item, index) {
      console.log(item)
      if (item.children) {
        this.data = item.children
        this.data.unshift(item)
      } else {
        this.data = []
        this.data.push(item)
      }
      this.isActive = index
    }
  }
}
</script>

<style scoped>
.va {
  background-color: #ffffff;
  height: 92%;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}

.active /deep/ .van-cell__title span {
  padding-left: 5px;
  border-left: 4px solid #ff6634;
}
</style>
